<template>
  <div class="stu-notice">
    <div>
      <span class="titleSty">已发布通知</span>
    </div>
    <div class="homeworkList">
      <el-table
          :data="tableData.filter(data => !search || data.title.toLowerCase().includes(search.toLowerCase()))"
          style="width: 100%;"
          height="11rem"
          :cell-style="cellStyle"
          @row-click = "onRowClick">
          <el-table-column
          label="日期"
          sortable
          prop="update_date">
          </el-table-column>
          <el-table-column
          label="标题"
          prop="title">
          </el-table-column>
          <el-table-column
          align="center"
          prop="resTime">
          <template slot="header" slot-scope="scope">
              <el-input
              v-model="search"
              size="mini"
              placeholder="输入标题搜索"/>
          </template>
          </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import http from '../../../util/http';

export default {
  data() {
    return {
      tableData: [],
      search: '',
    };
  },
  methods: {
    getNoticeList() {
      http.get(`/noticeAPI/findNotice?id=${window.localStorage.getItem('userId')}`)
      .then((res) => {
        this.tableData = res.resultMap.findNotice;
        this.listLength = res.resultMap.findNotice.length;
        const today = new Date();
        const a1 = today;
        for (let i = 0; i < this.listLength; i += 1) {
          const a2 = Date.parse(new Date(this.tableData[i].update_date));
          const b = parseInt((a1 - a2) / (1000 * 60 * 60 * 24), 10);
          // console.log(b);
          if (b <= 3 && b >= 0) {
            this.tableData[i].resTime = 'New';
          }
        }
      })
      .catch((error) => {
        // console.log(error);
      });
    },
    onRowClick(row, event, column) {
      window.localStorage.setItem('noticeID', row.id);
      this.$router.push('/ViewNotice');
    },
    cellStyle({ columnIndex }) {
      if (columnIndex === 2) {
        return `font-size:.4rem;
                font-style: oblique;
                color: transparent;
                -webkit-text-stroke: .02rem red;
                letter-spacing: 0.04em;`;
      }
        return '';
    },
  },
  mounted() {
    this.getNoticeList();
  },

};
</script>
<style scoped>
.stu-notice{
  width: 14rem;
}
.titleSty{
  color: white;
  font-size: .7rem;
  margin: 0 0 0 .5rem;
}
.homeworkList{
  margin-top: .5rem;
  box-shadow:.1rem .06rem .15rem #888;
}
</style>
